<template>
  <el-drawer
    title="店铺消费情况分析"
    :visible="showTable"
    direction="rtl"
    size="100%"
    @close="closeDrawer"
  >
    <!-- 用户信息 -->
    <el-row type="flex" justify="space-between" style="margin-bottom:60px;">
      <el-col>
        用户ID:{{ personeStorelInfo }}
      </el-col>
      <el-col>
        用户名称:{{ personeStorelInfo }}
      </el-col>
      <el-col>
        联系电话:{{ personeStorelInfo }}
      </el-col>
    </el-row>
    <span style="margin:0 20px;">本周</span>
    <span style="margin:0 20px;">本月</span>
    <span style="margin:0 20px;">全年</span>
    <!-- 时期选择组件 -->
    <el-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']"
      class="dateChoose"
    />
    <!-- 图表组件 -->
    <el-row type="flex" justify="space-between">
      <el-col>
        <huan-xing />
      </el-col>
      <el-col v-if="showRight">
        <huan-xing />
      </el-col>
      <el-col v-if="showDateTable">
        <el-table
          :data="personeStorelInfo"
          style="width: 100%"
        >
          <el-table-column
            prop="username"
            label="用户名称"
            width="80"
          />
          <el-table-column
            prop="storeCount"
            label="商圈店铺数量"
            width="180"
          />
          <el-table-column
            prop="orderCount"
            label="订单数量"
          />
          <el-table-column
            prop="saleCount"
            label="消费额"
          />
        </el-table>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script>
// 导入图标组件
import HuanXing from '@/views/district/components/HuanXing';
export default {
  components: {
    HuanXing,
  },
  props: {
    // 店铺经营分析抽屉
    showTable: {
      type: Boolean,
      default: false,
    },
    showRight: {
      type: Boolean,
      default: true,
    },
    personeStorelInfo: {
      type: Array,
      default: () => [],
    },
    showDateTable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      value: '',
    };
  },
  methods: {
    closeDrawer() {
      this.$emit('update:showTable', false);
    },
  },
};
</script>

<style scoped>

</style>
